<template>
  <div class="login">
    <!-- <div class="logo">
      <img src="@/assets/logo/logo1.png" />
    </div> -->
    <img style="height: 432.5px;" src="@/assets/logo/logo-left.png" alt="">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="height:432.5px;">
      <h3 class="title">同济咨询全过程工程咨询服务云平台</h3>
      <div v-if="!isRePassword">
        <div class="login-type">
          <div class="login-account" :class="{active: isActive}" @click="selectType('account')">账号登录</div>
          <div class="login-iphone" :class="{active: !isActive}" @click="selectType('iphone')">手机号登录</div>
        </div>
        <div v-if="isActive">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              autocomplete="off"
              placeholder="请输入账号"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="use" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              autocomplete="off"
              placeholder="请输入密码"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="newpassword" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <!-- <el-form-item prop="code">
            <el-input
              v-model="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: 63%"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
            </el-input>
            <div class="login-code">
              <img :src="codeUrl" @click="getCode" />
            </div>
          </el-form-item>-->
        </div>
        <div v-if="!isActive">
          <el-form-item prop="iphone">
            <el-input
              v-model="loginForm.iphone"
              type="text"
              autocomplete="off"
              placeholder="请输入手机号"
            >
              <svg-icon slot="prefix" icon-class="iphone" class="el-input__icon input-icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="msgCode">
            <el-input
              v-model="loginForm.msgCode"
              autocomplete="off"
              placeholder="请输入验证码"
              style="width:70%"
              @keyup.enter.native="handleLogin"
            >
              <svg-icon slot="prefix" icon-class="newpassword" class="el-input__icon input-icon" />
            </el-input>
            <el-button v-if="!isDisabled" class="codebutton" @click="sendCode">获取验证码</el-button>
            <el-button v-if="isDisabled" class="codebutton disabled">{{ codeTime }}s后重新获取</el-button>
          </el-form-item>
        </div>
        <div v-if="isActive" style="display:flex;margin-bottom:36px;">
          <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
          <div class="repassword">
            <span @click="rePassword">重置密码</span>
          </div>
        </div>
        <el-form-item style="width:100%;">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </div>
      <div v-if="isRePassword">
        <div class="retitle">重置密码</div>
        <!-- <el-form-item prop="username">
          <el-input
            v-model="loginForm.reuserName"
            type="text"
            autocomplete="off"
            placeholder="请输入账号"
          >
            <svg-icon slot="prefix" icon-class="use" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>-->
        <el-form-item prop="reiphone">
          <el-input
            v-model="loginForm.reiphone"
            type="text"
            autocomplete="off"
            placeholder="请输入手机号"
          >
            <svg-icon slot="prefix" icon-class="iphone" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="repassword">
          <el-input
            v-model="loginForm.repassword"
            type="password"
            autocomplete="off"
            placeholder="请输入新密码"
            @keyup.enter.native="handleLogin"
          >
            <svg-icon slot="prefix" icon-class="newpassword" class="el-input__icon input-icon" />
          </el-input>
        </el-form-item>
        <el-form-item prop="remsgCode">
          <el-input
            v-model="loginForm.remsgCode"
            autocomplete="off"
            placeholder="请输入验证码"
            style="width:70%"
            @keyup.enter.native="handleLogin"
          >
            <svg-icon slot="prefix" icon-class="newpassword" class="el-input__icon input-icon" />
          </el-input>
          <el-button v-if="!isDisabled" class="codebutton" @click="reRendCode">获取验证码</el-button>
          <el-button v-if="isDisabled" class="codebutton disabled" disabled>{{ codeTime }}s后重新获取</el-button>
        </el-form-item>
        <el-form-item style="width:100%;">
          <el-button
            size="medium"
            type="primary"
            style="width:calc(50% - 8px);display:inline-block"
            @click.native.prevent="changePassword"
          >
            <span>确定</span>
          </el-button>
          <el-button
            size="medium"
            type="primary"
            plain
            style="width:calc(50% - 8px);display:inline-block"
            @click.native.prevent="reGoLogin"
          >
            <span>返回登录</span>
          </el-button>
        </el-form-item>
      </div>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <span>©上海同济工程咨询有限公司 版权所有</span>
    </div>
  </div>
</template>

<script>
import { getCodeImg, getMessageCode, editPassword, getLoginMessageCode } from '@/api/login';
import Cookies from 'js-cookie';
import { encrypt, decrypt } from '@/utils/jsencrypt';

export default {
  name: 'Login',
  data () {
    return {
      codeUrl: '',
      isActive: true,
      isDisabled: false,
      cookiePassword: '',
      codeTime: 60,
      isRePassword: false,
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: '',
        iphone: '',
        msgCode: '',
        msgUuid: '',
        remsgCode: '',
        remsguuid: ''
      },
      loginRules: {
        username: [
          { required: true, trigger: 'blur', message: '用户名不能为空' }
        ],
        iphone: [
          {
            pattern: /^1[34578]\d{9}$/,
            message: '请输入有效手机号码',
            trigger: 'blur'
          }
        ],
        reiphone: [
          {
            pattern: /^1[34578]\d{9}$/,
            message: '请输入有效手机号码',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' }
        ],
        msgCode: [
          { required: true, trigger: 'blur', message: '验证码不能为空' }
        ],
        repassword: [
          { required: true, trigger: 'blur', message: '密码不能为空' }
        ],
        remsgCode: [
          { required: true, trigger: 'blur', message: '验证码不能为空' }
        ]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        console.log(route)
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created () {
    // this.getCode()
    debugger
    this.getCookie()
  },
  methods: {
    selectType (type) {
      if (type === 'account') {
        this.isActive = true
      } else {
        this.isActive = false
      }
    },
    sendCode () {
      getLoginMessageCode({ phonenumber: this.loginForm.iphone }).then(res => {
        if (res.code === 200) {
           //this.loginForm.msgCode = res.verifyCode
           this.loginForm.msgUuid = res.uuid
          this.isDisabled = true
          const codeTime = 60
          let vm = this
          let timer = window.setInterval(() => {
            if (vm.codeTime > 0 && vm.codeTime <= codeTime) {
              // 倒计时时不可点击
              vm.isDisabled = true
              // 计时秒数
              vm.codeTime--
            } else {
              // 倒计时完，可点击
              vm.isDisabled = false
              // 更新按钮文字内容
              // 清空定时器!!!
              clearInterval(timer)
              vm.codeTime = 60
            }
          }, 1000)
        }
      })
    },
    reRendCode () {
      debugger
      getLoginMessageCode({ phonenumber: this.loginForm.reiphone }).then(res => {
        if (res.code === 200) {
          // this.loginForm.msgCode = res.verifyCode
          this.loginForm.remsguuid = res.uuid
          this.isDisabled = true
          const codeTime = 60
          let vm = this
          let timer = window.setInterval(() => {
            if (vm.codeTime > 0 && vm.codeTime <= codeTime) {
              // 倒计时时不可点击
              vm.isDisabled = true
              // 计时秒数
              vm.codeTime--
            } else {
              // 倒计时完，可点击
              vm.isDisabled = false
              // 更新按钮文字内容
              // 清空定时器!!!
              clearInterval(timer)
              vm.codeTime = 60
            }
          }, 1000)
        }
      })
    },
    rePassword () {
      this.$refs['loginForm'].resetFields()
      this.isRePassword = true
    },
    getCode () {
      getCodeImg().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.loginForm.uuid = res.uuid
      })
    },
    getCookie () {
      const username = Cookies.get('username')
      const password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      }
    },
    handleLogin () {
      var userinfo = {
        userName: this.loginForm.username
      }

      sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
      if (this.isActive) {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            if (this.loginForm.rememberMe) {
              Cookies.set('username', this.loginForm.username, { expires: 30 })
              Cookies.set('password', encrypt(this.loginForm.password), {
                expires: 30
              })
              Cookies.set('rememberMe', this.loginForm.rememberMe, {
                expires: 30
              })
            } else {
              Cookies.remove('username')
              Cookies.remove('password')
              Cookies.remove('rememberMe')
            }
            this.$store
              .dispatch('Login', this.loginForm)
              .then(() => {
                // this.$router.push({ path: this.redirect || "/" });
                this.$router.push({ path: '/' })
              })
              .catch(() => {
                this.loading = false
                // this.getCode()
              })
          }
        })
      } else {
        const re = /^1\d{10}$/
        if (!re.test(this.loginForm.iphone)) {
          this.msgError('请输入正确手机号码！')
          return false
        }
        if (this.loginForm.msgCode === '') {
          this.msgError('请输入验证码！')
          return false
        }
        this.loading = true
        this.$store
          .dispatch('LoginIphone', this.loginForm)
          .then(() => {
            // this.$router.push({ path: this.redirect || "/" });
            this.$router.push({ path: '/' })
          })
          .catch(() => {
            this.loading = false
          })
      }
    },
    changePassword () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          editPassword(
            this.loginForm.reiphone,
            this.loginForm.repassword,
            this.loginForm.remsgCode,
            this.loginForm.remsguuid
          ).then(response => {
            if (response.code === 200) {
              this.msgSuccess('修改成功')
              this.isActive = true
              this.isRePassword = false
            } else {
              this.msgError(response.msg)
            }
          })
        }
      })
    },
    reGoLogin () {
      this.isRePassword = false
      this.loginForm.remsgCode = ''
      this.loginForm.reiphone = ''
      this.loginForm.repassword = ''
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
body {
  font-family: Microsoft YaHei;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: url('../assets/image/login-background.png') no-repeat;
  background-size: cover;
  .logo {
    position: fixed;
    left: 32px;
    top: 32px;
    img {
      width: 240px;
      height: 80px;
    }
  }
}
.title {
  font-size: 20px;
  color: rgba(32, 34, 37, 0.75);
  text-align: center;
  margin: 0;
}

.login-type {
  margin: 35px 0;
  width: 100%;
  display: flex;
  div {
    flex: 1;
    text-align: center;
    font-size: 16px;
    padding-bottom: 15px;
    cursor: pointer;
    letter-spacing: -0.24px;
  }
  .active {
    color: #1d7ee7;
    border-bottom: 2px solid #1d7ee7;
    font-weight: 600;
  }
}

/deep/.login-form {
  // border-radius: 3px;
  background: #ffffff;
  width: 400px;
  padding: 20px 40px;
  .el-input {
    height: 48px;
    input {
      height: 48px;
      background: #fbfbfb;
    }
  }
  .input-icon {
    height: 20px;
    width: 20px;
    margin: 15px 15px 15px 10px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.el-login-footer {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #464646;
  letter-spacing: -0.34px;
  text-align: center;
  position: fixed;
  bottom: 32px;
}

/deep/.el-checkbox__label {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #8e8e8e;
  letter-spacing: -0.21px;
}

/deep/.repassword {
  flex: 1;
  text-align: right;

  span {
    cursor: pointer;
    color: #080808;
    letter-spacing: -0.21px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
  }
}

/deep/.el-button--medium {
  font-size: 16px;
  padding: 15px 0;
}

/deep/.el-input--prefix {
  background: #fbfbfb;
  .el-input__inner {
    padding-left: 60px;
  }
}

/deep/.el-input__prefix::after {
  content: '';
  position: absolute;
  background: #eeeeee;
  height: 20px;
  width: 1px;
  top: 14px;
}
.codebutton {
  width: calc(30% - 6px);
  background-color: #fbfbfb;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: -0.21px;
  height: 48px;
}

.disabled {
  color: #c0c4cc;
  cursor: not-allowed;
  background-image: none;
  background-color: #fff;
  border-color: #e6ebf5;
}

.retitle {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: -0.24px;
  text-align: center;
  margin: 37px 0 16px 0;
}
</style>
